<template>
    <div class="main">
        <div class="content">
            <div class="sysTitle">
                专业技术人员业绩数据信息系统
            </div>
            <div v-show="$route.name == 'login'" class="form login">
                <div v-if="isChrome" class="title">用户登录</div>
                <div v-else class="title" style="color:red;">请使用谷歌浏览器登录本系统</div>
                <div class="formItem">
                    <div class="name">校园网账号</div>
                    <el-input class="value" v-model="loginObj.username" size="medium" placeholder="请输入校园网账号"></el-input>
                </div>
                <div class="formItem">
                    <div class="name">密码</div>
                    <el-input class="value" type="password" v-model="loginObj.password" @keyup.enter.native="login()" size="medium" placeholder="请输入密码"></el-input>
                </div>
                <!-- <div class="formItem">
                    <div class="name">验证码</div>
                    <div class="verifyCode">
                        <el-input class="value" v-model="loginObj.code" size="medium" @keyup.enter.native="login()" placeholder="请输入验证码"></el-input>
                        <img class="verifyCodeImage" :src="imageCode" @click="loadVerify()">
                    </div>
                </div> -->
                <el-button class="submitButton" :disabled="isChrome === false" type="primary" @click="login()">
                   <span v-if="isChrome">登录</span>
                   <span v-else>请使用谷歌浏览器</span>
                </el-button>
                <div class="otherOperation">
                    <el-link type="primary" @click="$router.push({name:'password'});">忘记密码</el-link>
                    <el-link type="primary" @click="$router.push({name:'register'});">注册</el-link>
                </div>
            </div>

            <div v-show="$route.name == 'register'"  class="form register">
                <div class="title">注册账号</div>
                <div class="formItem">
                    <div class="name">姓名</div>
                    <el-input class="value" v-model="registerObj.name" size="medium" placeholder="请填写姓名"></el-input>
                </div>
                <!-- <div class="formItem">
                    <div class="name">编号</div>
                    <el-input class="value" v-model="registerObj.techNum" size="medium" placeholder="请填写编号"></el-input>
                </div> -->
                <div class="formItem">
                    <div class="name">校园网账号</div>
                    <el-input class="value" v-model="registerObj.mobile" size="medium" placeholder="请输入校园网账号"></el-input>
                </div>
                <!-- <div class="formItem">
                    <div class="name">验证码</div>
                    <div class="value verifyCode">
                        <el-input class="value" v-model="registerObj.imageCode" size="medium" placeholder="请输入验证码"></el-input>
                        <img class="verifyCodeImage" :src="imageCode" @click="loadVerify()">
                    </div>
                </div> -->
                <!-- <div class="formItem getVerifyCode">
                    <div class="name">手机验证码</div>
                    <el-input class="value" size="medium" v-model="registerObj.code" placeholder="手机验证码"></el-input>
                    <div ref="getVerifyCodeButton" class="getVerifyCodeButton" @click="getMiblieVerifyCode(0)">获取验证码</div>
                </div> -->
                <div class="formItem">
                    <div class="name">密码</div>
                    <el-input class="value" type="password" v-model="registerObj.password" size="medium" placeholder="请输入密码"></el-input>
                </div>
                <div class="formItem">
                    <div class="name">确认密码</div>
                    <el-input class="value"  type="password" v-model="registerObj.confirmPassword" size="medium" placeholder="请再次输入密码"></el-input>
                </div>
                <el-button class="submitButton" type="primary" @click="register()">注册</el-button>
                <div class="otherOperation">
                    <el-link type="primary" @click="$router.push({name:'login'});">返回登录</el-link>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
import { loginPost,registerPost,sendSmsCodePost,infoPartGet,kaptchaGet } from '@/service/api'

export default {
    data(){
        return {
            loginObj:{
                code:"",
                username:"",
                password:"",
            },
            registerObj:{
                mobile:"",
                password:"",
                confirmPassword:"",
                imageCode:"",
                code:"",
                name:"",
                academic:"",
            },
            imageCode:"",
            timer:null,
            countdown:60,

            isChrome:true,
        }
    },
    mounted(){
      this.loadVerify();

      var sUsrAg = navigator.userAgent;
      if(sUsrAg.indexOf("Chrome") > -1){
         this.isChrome = true;
      }else{
         this.isChrome = false;
      }
    },
    methods:{
        loadVerify:function(){
            kaptchaGet({
                method: 'get',
                url: '/open/kaptcha/' + '?' + Math.random(),
                responseType: 'blob',
            }).then(response => {
                this.imageCode =  URL.createObjectURL(response);
            });
        },
        login:function(){
            var formData = new FormData;
            formData.append("type","ADMIN");
            Object.keys(this.loginObj).forEach((key) => {
                formData.append(key,this.loginObj[key]);
            });
            loginPost(formData).then(res => {
                if(res.code == 200){
                    localStorage.setItem("REVIEW-TOKEN",res.data);
                    // localStorage.setItem("REVIEW-TOKEN",'eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiIxODYyOTY4Nzk5NSIsInVzZXJJZCI6Im1qZHYyaWd4IiwibmFtZSI6IllBTkdXVyIsImV4cCI6MTU4Mjc4MDQ0OH0.MhErvueNrdOk3dT38DZR8KGYsbcCz1rZvvdbNp-BEC8yXxvRCJZ5xYprPLB2DUK8UE-gKxUBzGrvqlO5c7YyZcqRxc31DVbChWk78isV-WZa_XOXfuYP_2dYfRHfFu7bjvsT4-djUMB7iMc3rr4itVVScqGbnUjH3TvIrU-8TTo');

                    //    infoPartGet().then(res => {
                    //        if(res.code == 200){
                    //             // 0 基本信息未录
                    //             // 1 资料录入未录
                    //             // 2 个人首页
                    //            switch(res.data){
                    //                case 0:{
                    //                    this.$router.replace({name:"basicInformation"});                                       
                    //                    break;
                    //                }
                    //                case 1:{
                    //                    this.$router.replace({name:"dataEntry"});     
                    //                    break;
                    //                }
                    //                case 2:{
                    //                    this.$router.replace({name:"personalHomepage"});     
                    //                    break;
                    //                }
                    //                case 3:{
                    //                    this.$router.replace({name:"overview"});     
                    //                    break;
                    //                }
                    //                default:{
                    //                     this.$router.replace("/");
                    //                }
                    //            }

                    //        }
                    //     });

                     this.$router.replace("/");
                    
                }
            });
        },
        register:function(){

            if(this.registerObj.confirmPassword != this.registerObj.password){
                this.$message.error("两次密码不一致");
                return;
            }

            var formData = new FormData;
            Object.keys(this.registerObj).forEach((key) => {
                formData.append(key,this.registerObj[key]);
            });
            registerPost(formData).then(res => {
                if(res.code == 200){
                    this.$router.replace({name:"login"}); 
                    this.$message.success("恭喜你注册成功，请登录~");
                }
            });
        },
        getMiblieVerifyCode(type){
            if(this.timer != null){
                return;
            }
            this.timedCount();

            var formData = new FormData;
            formData.append("imageCode",this.registerObj.imageCode);
            formData.append("mobile",this.registerObj.mobile);
            formData.append("type",type);
            sendSmsCodePost(formData).then(res => {
                if(res.code == 200){
                    // this.$router.replace("/");
                }else{
                    this.countdown = 0;
                }
            });
        },
        timedCount(){
            if(this.countdown > 0){
                var that = this;
                this.timer = setTimeout(function(){
                    that.timedCount();
                },1000);
            }
            if(this.countdown <= 0){ // 倒计时完成
                clearTimeout(this.timer);
                this.timer = null;
                this.countdown = 60;
                this.$refs.getVerifyCodeButton.innerHTML = "获取验证码";
                return;
            }

            // 倒计时过程中
            this.$refs.getVerifyCodeButton.innerHTML = "重新获取("+ this.countdown +"s)";
            --this.countdown;
        }

    }

}
</script>
<style scoped>

.main{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /*background-image:url(../../assets/login/b.png);*/
    background-image:url(../../assets/background_1.jpg);
    background-size:cover;        /* 100%填充容器。 图片的宽高比例也是不变的哦，显示不下的会被隐藏 */
    background-position:center;   /* left/center/right top/center/bottom;*/
}
.content{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 500px;
    background: white;
    border-radius: 8px;
    box-shadow: 2px 5px 20px 11px rgba(0, 0, 0, 0.18823529411764706);
    overflow: hidden;
}
.sysTitle{
    text-align: center;
    font-size: 24px;
    color: red;
    font-weight: bold;
    box-sizing: border-box;
    width: 100%;
    padding:40px 20px;
    /*background-image:url(../../assets/login/b2.png);*/
    /*background-size:100% 100%;    !* 背景图完整覆盖容器，但宽高比例变了，图片变形。*!*/
    /*background-repeat:no-repeat;*/
    /*background-position:top;   !* left/center/right top/center/bottom;*!*/

    background-image:url(../../assets/background_2.png);
    background-size: 100% 200%;
    background-repeat: no-repeat;
    background-position: center;
}
.form>.title{
    font-size: 24px;
    color: #666666;
    text-align: center;
    padding: 24px 0px;
}

/* 登录 ------------------------------------------------------------------------------------------------------- */
.form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 70%;
    padding-bottom: 20px;
}
.form>*{
    width: 100%;
}
.form .formItem{
    display: flex;
    flex-direction: column;
    margin: 7px 0px;
    position: relative;
}
.form .formItem .name{
    color: #999999;
    font-size: 16px;
    margin-bottom: 8px;
}
.form .formItem .verifyCode{
    display:flex;
    flex-direction: row;
}
.form .formItem .verifyCodeImage{
    width: 40%;
    height: 35px;
    padding-left: 10px;
    cursor: pointer;
}
.form .submitButton{
    margin-top: 14px;
    font-size: 19px;
}
.form .otherOperation{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0px;
}


/*  注册 ------------------------------------------------------------------------------------------------------- */
.form.register .formItem{
    flex-direction:row;
}
.form.register .formItem .name{
    flex-grow: 1;
    text-align: right;
    padding-right: 10px;
    margin-bottom:0px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.form.register .formItem .value{
    width: 74%;
}
.form.register .formItem .getVerifyCodeButton{
    position: absolute;
    right: 0px;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #999999;
    cursor: pointer;
    right: 10px;
}
.form.register .formItem.getVerifyCode >>> .value>input{
    padding-right: 90px;
}
.form.register .submitButton{
    width: 80%;
}
.form.register .otherOperation{
    justify-content:center;
}
</style>
